<!--
 * @Author: MrDotYan 2564217790@qq.com
 * @Date: 2024-09-18 18:58:51
 * @LastEditors: MrDotYan 2564217790@qq.com
 * @LastEditTime: 2024-09-25 22:09:18
 * @FilePath: /webServerAdmin/src/components/CodeView/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-drawer v-if="useDrawer" v-model="visible" title="JSON预览">
      <div class="top">
        <slot name="json-drawer-top"></slot>
      </div>
      <json-viewer :value="json" :expand-depth="depth" :copyable :boxed :sort></json-viewer>
    </el-drawer>
    <json-viewer v-else :value="json" :expand-depth="depth" :copyable :boxed :sort></json-viewer>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import JsonViewer from "vue-json-viewer";

export interface JsonViewerInterface {
  json?: any;
  depth?: number;
  copyable?: boolean;
  boxed?: boolean;
  sort?: boolean;
  useDrawer?: boolean;
}
withDefaults(defineProps<JsonViewerInterface>(), {
  depth: Infinity,
  copyable: false,
  boxed: true,
  sort: true,
  useDrawer: true
});

const visible = ref(false);
defineExpose({
  open() {
    visible.value = true;
  }
});
</script>

<style lang="scss" scoped>
.top {
  margin-bottom: 20px;
}
</style>
